<script setup>
import {reactive, ref} from 'vue'
import ListItem from "@/components/listItem.vue";
import { getEnterpriseCheckList } from '@/api/enterpriseCheck'
import {onShow} from "@dcloudio/uni-app";

const dict = uni.getStorageSync('dict')
const userInfo = uni.getStorageSync('userInfo')
const pageData = reactive({
  activeTab: 0,
  loading: false,
  loadingBottom: true,
  listData: [],
  queryListParams: {
    pageNum: 1,
    pageSize: 10
  },
  total: 0,
  noMore: false
})
const lower = (e) => {
  if(pageData.listData.length >= pageData.total) {
    pageData.noMore = true
    return
  }
  pageData.queryListParams.pageNum++
  getList()
}
const onRefresh = (e) => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const handleDetail = (i) => {
  console.log('gogo', i)
  uni.setStorage({
    key: 'checkDetail',
    data: i,
    success: () => {
      uni.navigateTo({
        url: '/pages/enterpriseInspection/detail?id=' + i.id
      })
    }
  })
}

const handleAdd = (isContinue) => {
  uni.removeStorage({
    key: 'checkDetail',
    success: () => {
      uni.navigateTo({
        url: '/pages/enterpriseInspection/detail' + (isContinue ? '?isContinue=1' : '')
      })
    }
  })
}
const changeTab = (v) => {
  console.log('v', v)
  switch (v.paneKey) {
    case '0':
      pageData.queryListParams.pageNum = 1
      delete pageData.queryListParams.status
      break
    case '1':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 1
      break
    case '2':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 0
      break
    case '3':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 3
      break
    case '4':
      pageData.queryListParams.pageNum = 1
      pageData.queryListParams.status = 2
      break
    default:
      console.log('未定义tab')
  }
  pageData.listData = []
  getList()
}
const getList = () => {
  pageData.loading = true
  pageData.loadingBottom = true
  getEnterpriseCheckList(pageData.queryListParams).then(res => {
    console.log(res)
    pageData.listData = [
      ...pageData.listData,
      ...res.rows
    ]
    pageData.total = res.total
    pageData.loading = false
    pageData.loadingBottom = false
  })
}

const nav = (item) => {
  console.log('item', item)
  uni.openLocation({
    latitude: item.lat - 0,
    longitude: item.lon - 0,
    name: item.companyName,
    success: function (res) {
      console.log('success', res);
    },
    fail: function (err) {
      console.log('err', err)
    },
    complete: function (result) {
      console.log('result', result)
    }
  })
}

const handleSearch = () => {
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const handleClear = async () => {
  delete pageData.queryListParams.companyName
  pageData.queryListParams.pageNum = 1
  pageData.listData = []
  getList()
}
const createEnterpriseCatch = ref({})
onShow(() => {
  pageData.listData = []
  getList()
  createEnterpriseCatch.value = uni.getStorageSync('createEnterpriseCatch')
})
</script>

<template>
  <nut-tabs v-model="pageData.activeTab" @click="changeTab">
    <nut-tab-pane title="全部" />
    <nut-tab-pane title="合格" />
    <nut-tab-pane title="整改" />
    <nut-tab-pane title="待复查" />
    <nut-tab-pane title="不合格" />
  </nut-tabs>
  <nut-searchbar v-model="pageData.queryListParams.companyName" placeholder="输入关键字查询" @search="handleSearch" @clear="handleClear"></nut-searchbar>
  <scroll-view :scroll-top="0" :scroll-y="true" :refresher-enabled="true" class="list-body" @scrolltolower="lower" @refresherrefresh="onRefresh">
    <view v-if="pageData.listData.length">
      <list-item v-for="(item, index) in pageData.listData" :key="item.id" @click="handleDetail(item)">
        <template v-slot:left>
          {{ item.companyName }}
        </template>
        <template v-slot:right>
          <nut-tag :type="dict.check_status[item.status]?.type">{{ dict.check_status[item.status]?.text }}</nut-tag>
        </template>
        <template v-slot:desc>
          <view class="address" @tap.stop="nav(item)">
            <!--          <nut-button type="primary" size="mini" @tap.stop="nav(item)">-->
            <!--            <template #icon>-->
            <!--              <nut-icon name="location2" />-->
            <!--            </template>-->
            <!--          </nut-button>-->
            <nut-icon name="location2" custom-color="#fa2c19" />
            {{ item.address }}
          </view>
          <view class="create-time">{{ item.createTime }}</view>
        </template>
      </list-item>
    </view>
    <view v-if="pageData.loadingBottom === true && pageData.listData.length" class="loading-bottom">
      <nut-icon name="loading"></nut-icon>
    </view>
    <nut-empty v-if="pageData.loading === false && !pageData.listData.length" image="empty" description="无内容"></nut-empty>
    <view v-if="pageData.loading === true && !pageData.listData.length" class="loading-box">
      <nut-icon name="loading"></nut-icon>
    </view>
    <view v-if="pageData.listData.length >= pageData.total && pageData.listData.length !== 0" class="no-more">没有更多···</view>
  </scroll-view>
  <view v-if="!userInfo.roleIds.includes(106)" class="btn">
    <nut-row :gutter="20">
      <nut-col :span="12">
        <nut-button block type="primary" @click="handleAdd(false)">
          <template #icon>
            <nut-icon name="uploader" />
          </template>
          新增
        </nut-button>
      </nut-col>
      <nut-col :span="12">
        <nut-button block :disabled="!Object.keys(createEnterpriseCatch).length" type="success" @click="handleAdd(true)">
          <template #icon>
            <nut-icon name="retweet" />
          </template>
          继续上次
        </nut-button>
      </nut-col>
    </nut-row>
  </view>
</template>

<style lang="scss">
.list-body{padding: 10px 0 80px;box-sizing:border-box;height: calc(100vh - 40px);}
.btn{position: fixed;bottom: 20px;width: 100%;padding: 0 40px;box-sizing: border-box;}
.loading-box{width: 100%;height: 300px;display: flex;justify-content: center;align-items: center;}
.loading-bottom{width: 100%;display: flex;justify-content: center;align-items: center;}
.no-more{display: flex;padding: 20px;justify-content: center;font-size: 12px;color: #aaa;}
</style>
<style>
.nut-tab-pane{display: none!important;}
.nut-list-item{height: auto!important;}
.desc view{display: flex;align-items: center;justify-content: space-between;}
.desc view .btn-nav{padding: 0 10px 0 0;}
.desc view .create-time{font-size: 12px;}
</style>
